<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.21.0/video-js.min.css" rel="stylesheet">
	<style>
		.videoCon {
			height: 400px;
			width: 600px;
			margin-bottom: 20px;
		}
		.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
			/* opacity: 1 !important; */
		}

		.video-js .vjs-progress-control {
			opacity: 0 !important;
		}

		.vjs-remaining-time {
			display: none !important;
		}

		.screenshotBtn {
			position: absolute;
			top: 5px;
			right: 94px;
		}
		.recordBtn {
			position: absolute;
			top: 2px;
			right: 134px;
		}
	</style>
</head>

<body>
	<div class="videoCon" id="videoJsCon">
		<video id="mmiid" class="video-js" controls preload="auto" width="100%"
			height="100%">
		</video>
	</div>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.21.0/video.min.js"></script>
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script> -->
	<script src="https://cdn.bootcdn.net/ajax/libs/videojs-flash/2.2.1/videojs-flash.js"></script>
	<script src="https://unpkg.com/flv.js/dist/flv.min.js"></script>
	<script src="https://unpkg.com/videojs-flvjs/dist/videojs-flvjs.min.js"></script>
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/RecordRTC/5.6.2/RecordRTC.js"></script> -->
	<!-- <script src="https://www.webrtc-experiment.com/screenshot.js"></script> -->
	<script type="text/javascript">
		//let videoUrl = 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'
		let videoUrl = 'http://60.208.54.214:19003/rtp/2d748d316eee4a09b514c868d3e39e31.live.flv?tenantId=1&userId=admin&userName=admin&organName=admin&organName=admin&channelId=37011204001310103003&cname=司家村村东北角路口03杆朝东'
		let videoPlayer = null
		// 录像所需要的 canvas
		let recordCanvas = null
		// 录像实列
		let recorder = null
		let animationFrame = null
		// 录像状态 false 未录像 true 录像中
		let isRecorder = false
			initVideoJS()
		// 初始化Videojs插件
		function initVideoJS(params) {
			videoPlayer = videojs("mmiid", {
				autoplay: 'muted',//自动播放
				controls: true,//用户可以与之交互的控件
				loop: true,//视频一结束就重新开始
				muted: false,//默认情况下将使所有音频静音
				aspectRatio: '16:9',//显示比率
				techOrder: ['html5', 'flvjs'],
				flvjs: {
					mediaDataSource: {
						isLive: false,
						cors: true,
						withCredentials: false,
					},
				},
				sources: [{
					src: videoUrl,
					type: 'video/x-flv'
				}],
				controls: true,
				preload: "none"
			});
			
			// setTimeout(() => {
			// 	videoPlayer.play();
			// 	addScreenshotBtnHandle()
			// }, 500)
		}
		// 添加截图/录像按钮
		function addScreenshotBtnHandle(params) {
			$('.vjs-control-bar').append(`
				<div class="screenshotBtn">
					<svg t="1619515761104" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11028" width="18" height="18"><path d="M512 384c55.6 0 107.8 21.6 147.1 60.9S720 536.4 720 592s-21.6 107.8-60.9 147.1S567.6 800 512 800s-107.8-21.6-147.1-60.9S304 647.6 304 592s21.6-107.8 60.9-147.1S456.4 384 512 384z m0-64c-150.2 0-272 121.8-272 272s121.8 272 272 272 272-121.8 272-272-121.8-272-272-272z" p-id="11029" fill="#ffffff"></path><path d="M650.9 128l4.4 23.6C666.7 212.1 719.6 256 781.1 256H896c35.3 0 64 28.7 64 64v512c0 35.3-28.7 64-64 64H128c-35.3 0-64-28.7-64-64V320c0-35.3 28.7-64 64-64h114.9c61.6 0 114.5-43.9 125.8-104.4l4.4-23.6h277.8z m39.8-64H333.3c-7.7 0-14.3 5.5-15.7 13.1l-11.8 62.7c-5.7 30.3-32.1 52.2-62.9 52.2H128C57.3 192 0 249.3 0 320v512c0 70.7 57.3 128 128 128h768c70.7 0 128-57.3 128-128V320c0-70.7-57.3-128-128-128H781.1c-30.8 0-57.2-21.9-62.9-52.2l-11.8-62.7c-1.4-7.6-8-13.1-15.7-13.1z" p-id="11030" fill="#ffffff"></path><path d="M224 352h-64c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c17.7 0 32 14.3 32 32s-14.3 32-32 32zM512 560c17.6 0 32 14.4 32 32s-14.4 32-32 32-32-14.4-32-32 14.4-32 32-32z m0-64c-53 0-96 43-96 96s43 96 96 96 96-43 96-96-43-96-96-96z" p-id="11031" fill="#ffffff"></path></svg>
				</div>
				<div class="recordBtn">
					<svg t="1666922230470" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2280" width="24" height="24"><path d="M937.6 326.4c-20.8-28.8-60.8-35.2-89.6-16l-64 44.8V352c0-88-72-160-160-160H240C152 192 80 264 80 352v320c0 88 72 160 160 160h384c84.8 0 153.6-65.6 160-147.2l65.6 44.8c11.2 8 24 11.2 36.8 11.2 35.2 0 64-28.8 64-64V363.2c-1.6-12.8-4.8-25.6-12.8-36.8zM720 672c0 52.8-43.2 96-96 96H240c-52.8 0-96-43.2-96-96V352c0-52.8 43.2-96 96-96h384c52.8 0 96 43.2 96 96v320z m164.8 4.8L784 606.4V433.6l100.8-70.4v313.6z" fill="#ffffff" p-id="2281"></path><path d="M288 400m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#ffffff" p-id="2282"></path></svg>
				</div>
			`)
			// 截图按钮点击事件
			$(document).on('click', '.screenshotBtn', function () {
				screenshotHandle()
			})
			// 录像按钮点击事件
			$(document).on('click', '.recordBtn', function () {
				recordHandle()
			})
		}
		// 截图
		function screenshotHandle() {
			const fileType = 'png'
			// 找到需要截图的video标签
			// video 实列
			const video = document.querySelector('#videoJsCon video')
			const canvas = document.createElement('canvas')
			canvas.width = video.videoWidth
			canvas.height = video.videoHeight
			canvas
				.getContext('2d')
				.drawImage(video, 0, 0, canvas.width, canvas.height) // 图片大小和视频分辨率一致
			const strDataURL = canvas.toDataURL('image/' + fileType) // canvas中video中取一帧图片并转成dataURL
			let arr = strDataURL.split(','),
				mime = arr[0].match(/:(.*?);/)[1],
				bstr = atob(arr[1]),
				n = bstr.length,
				u8arr = new Uint8Array(n)
			while (n--) {
				u8arr[n] = bstr.charCodeAt(n)
			}
			const blob = new Blob([u8arr], {
				type: mime
			})
			const url = window.URL.createObjectURL(blob)
			downloadFile(url, 'png')
		}
		// 下载
		function downloadFile(blob, fileType) {
			const a = document.createElement('a')
			a.style.display = 'none'
			a.href = blob
			// const time = this.parseTime(new Date())
			const time = new Date().getTime()
			a.download = `${time}.${fileType}`
			document.body.appendChild(a)
			a.click()
			setTimeout(function () {
				document.body.removeChild(a)
				window.URL.revokeObjectURL(blob)
			}, 1000)
		}
		// 录像
		function recordHandle() {
			let recordDom=document.querySelector(".recordBtn")
			isRecorder = !isRecorder
			if (isRecorder) {
				recordDom.innerHTML = `
				<svg t="1666922230470" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2280" width="24" height="24"><path d="M937.6 326.4c-20.8-28.8-60.8-35.2-89.6-16l-64 44.8V352c0-88-72-160-160-160H240C152 192 80 264 80 352v320c0 88 72 160 160 160h384c84.8 0 153.6-65.6 160-147.2l65.6 44.8c11.2 8 24 11.2 36.8 11.2 35.2 0 64-28.8 64-64V363.2c-1.6-12.8-4.8-25.6-12.8-36.8zM720 672c0 52.8-43.2 96-96 96H240c-52.8 0-96-43.2-96-96V352c0-52.8 43.2-96 96-96h384c52.8 0 96 43.2 96 96v320z m164.8 4.8L784 606.4V433.6l100.8-70.4v313.6z" fill="#d81e06" p-id="2281"></path><path d="M288 400m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#d81e06" p-id="2282"></path></svg>
				`
				if (!recordCanvas) recordCanvas = document.createElement("canvas");
				recorder = RecordRTC(recordCanvas, {
					type: "canvas",
				});
				recorder.startRecording();
				drawMedia();
			} else {
				recordDom.innerHTML = `
					<svg t="1666922230470" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2280" width="24" height="24"><path d="M937.6 326.4c-20.8-28.8-60.8-35.2-89.6-16l-64 44.8V352c0-88-72-160-160-160H240C152 192 80 264 80 352v320c0 88 72 160 160 160h384c84.8 0 153.6-65.6 160-147.2l65.6 44.8c11.2 8 24 11.2 36.8 11.2 35.2 0 64-28.8 64-64V363.2c-1.6-12.8-4.8-25.6-12.8-36.8zM720 672c0 52.8-43.2 96-96 96H240c-52.8 0-96-43.2-96-96V352c0-52.8 43.2-96 96-96h384c52.8 0 96 43.2 96 96v320z m164.8 4.8L784 606.4V433.6l100.8-70.4v313.6z" fill="#ffffff" p-id="2281"></path><path d="M288 400m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#ffffff" p-id="2282"></path></svg>
				`
				recorder.stopRecording(() => {
					const url = window.URL.createObjectURL(recorder.getBlob());
					downloadFile(url, "mp4");
					cancelAnimationFrame(animationFrame);
					recordCanvas = null;
					animationFrame = null;
				});
			}
		}
		// 刷新canvas
		function drawMedia() {
			const ctx = recordCanvas.getContext("2d");
			// 找到需要截图的video标签
			const video = document.querySelector('#videoJsCon video')
			recordCanvas.setAttribute("width", video.videoWidth);
			recordCanvas.setAttribute("height", video.videoHeight);
			ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
			// requestAnimationFrame 根据电脑显示帧数进行循环
			animationFrame = requestAnimationFrame(() => drawMedia());
		}

	</script>
</body>

</html>
